<template>
  <view class="add-group">
    <view class="section-box">
      <view class="section-title">
        <view class="title">分组信息</view>
      </view>
      <view class="form-box">
        <view class="form-item">
          <view class="item-label">分组名称</view>
          <view class="item-content">
            <input :disabled="!enableEdit" placeholder="请输入分组名称" v-model="groupName" maxlength="20" />
          </view>
        </view>
        <view class="form-item">
          <view class="item-label">分组编号</view>
          <view class="item-content">
            <input :disabled="!enableEdit" placeholder="请输入分组编号" v-model="groupNumber" maxlength="10" />
          </view>
        </view>
        <view class="form-item">
          <view class="item-label">应用场景</view>
          <view class="item-content">
            <view v-if="!enableEdit" class="disabled-layer" @click.prevent></view>
            <uni-data-select
                class="select-item"
                placeholder="请选择应用场景"
                v-model="sceneCode"
                :localdata="sceneList"
                :clear="false"
            ></uni-data-select>
          </view>
        </view>
        <view class="form-item">
          <view class="item-label">所在区域</view>
          <view class="item-content">
            <view v-if="!enableEdit" class="disabled-layer" @click.prevent></view>
            <uni-data-select
                class="select-item"
                placeholder="请选择所在区域"
                v-model="areaCode"
                :localdata="areaList"
                :clear="false"
            ></uni-data-select>
          </view>
        </view>
      </view>
    </view>
    <cover-view v-if="enableEdit" class="page-bottom-btn" @click="save()">保存</cover-view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
export default {
  mixins: [mixin],
  data() {
    return {
      groupName: '',
      groupNumber: '',
      areaCode: '',
      areaList: [],
      sceneCode: '',
      sceneList: [],
      enableEdit: false,
    }
  },
  mounted() {
    this.enableEdit = this.params.canEdit === 'true'
    if (this.params.groupId) {
      uni.setNavigationBarTitle({
        title: '编辑分组'
      })
      this.getGroupInfo()
    }
    this.getProjectArea()
    this.getProjectScenario()
  },
  methods: {
    getGroupInfo() {
      const self = this
      uni.request({
        url: '/project_group/get',
        data: {
          id: self.params.groupId
        },
        success(result) {
          if (result.data.success && result.data.data) {
            self.groupName = result.data.data.name || ''
            self.groupNumber = result.data.data.gnum || ''
            self.areaCode = result.data.data.area_id || ''
            self.sceneCode = result.data.data.scene || ''
          }
        }
      })
    },
    getProjectArea() {
      const self = this
      uni.request({
        url: '/project_area/list',
        data: {
          xm_id: self.params.projectId
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              const areaItem = {
                key: item.id,
                value: item.id,
                text: item.name || ''
              }
              arr.push(areaItem)
            })
            self.areaList = arr
          }
        }
      })
    },
    getProjectScenario() {
      const self = this
      uni.request({
        url: '/project_scene/list',
        data: {
          xm_id: self.params.projectId
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              const sceneItem = {
                key: item.id,
                value: item.id,
                text: item.name || '',
              }
              arr.push(sceneItem)
            })
            self.sceneList = arr
          }
        }
      })
    },
    checkCanSubmit() {
      const self = this
      self.groupName = `${self.groupName}`.trim()
      if (!self.groupName) {
        uni.showToast({
          icon: 'none',
          title: '请输入分组名称'
        })
        return false
      }
      self.groupNumber = `${self.groupNumber}`.trim()
      if (!self.groupNumber) {
        uni.showToast({
          icon: 'none',
          title: '请输入分组编码'
        })
        return false
      }
      const groupNumberReg = /^([1-9]|1[0-9]{0,2})$/
      if (!groupNumberReg.test(self.groupNumber)) {
        uni.showToast({
          icon: 'none',
          title: '分组编码应为1 - 199'
        })
        return false
      }
      return true
    },
    save() {
      if (this.params.groupId) {
        this.editGroup()
      } else {
        this.addGroup()
      }
    },
    addGroup() {
      const self = this
      if (!self.checkCanSubmit()) return
      const data = {
        xm_id: self.params.projectId,
        name: self.groupName,
        gnum: self.groupNumber,
      }
      if (self.areaCode) {
        data.area_id = self.areaCode
      }
      if (self.sceneCode) {
        data.scene = self.sceneCode
      }
      uni.request({
        url: '/project_group/add',
        data,
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        }
      })
    },
    editGroup() {
      const self = this
      if (!self.checkCanSubmit()) return
      const data = {
        id: self.params.groupId,
        xm_id: self.params.projectId,
        name: self.groupName,
        gnum: self.groupNumber,
      }
      if (self.areaCode) {
        data.area_id = self.areaCode
      }
      if (self.sceneCode) {
        data.scene = self.sceneCode
      }
      uni.request({
        url: '/project_group/modify',
        data,
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        }
      })
    },
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped lang="scss">
.add-group {
  padding: 30rpx 30rpx 130rpx;
}
.section-box {
  background-color: $white;
  border-radius: 10rpx;
  padding: 30rpx 30rpx 0;
  margin-bottom: 20rpx;
}
.section-title {
  @include section-title;
}
.form-box {
  .form-item {
    height: 100rpx;
    border-top: 2rpx solid $border-base;
    padding: 20rpx 50rpx 20rpx 150rpx;
    position: relative;
    display: flex;
    align-items: center;
    &:first-child {
      border-top: 0;
    }
    .item-label {
      position: absolute;
      left: 0;
      font-size: $font-size-3;
    }
    .item-content {
      position: relative;
      text-align: right;
      width: 100%;
      font-size: $font-size-2;
      display: flex;
      justify-content: flex-end;
      &.placeholder {
        color: $text-placeholder;
      }
    }
    .select-item {
      width: 350rpx;
    }
  }
}
</style>
